<template>
	<view>
		<view id="app" class="app-height communicationRecord" >
		    <view class="attention-data">
		        <view class="attention-item" v-for="(item,index) in chatList">
		           <view class="avatar-info">
		                <image mode="widthFix" class="avatar" :src="item.portrait?item.portrait:'https://m.nocexpo.com/statics/js/modules/h5/img/img13.png'" @click="enterPersonalByType(item)" />
		                <view class="info">
		                    <view class="name">{{item.userName}}
		                        <image mode="widthFix" class="icon" v-if="item.role==1" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon_gong.png"/>
		                        <image mode="widthFix" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon_cai.png" class="icon" v-else/>
		                    </view>
		                    <view class="user" v-if="item.role==1"><image mode="widthFix" class="icon" src="https://m.nocexpo.com/statics/js/modules/h5/img/Certification.png"/>{{item.company}}</view>
		                </view>
		            </view>
		            <view class="private-letters" >
		                <view class="btn-to-what" @click="toChat(item.id)" v-if="item.chatType==5">
							<image mode="widthFix" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon_to_chat_with.png" />私信
		                </view>
		                <view class="btn-phone" v-else @click="dialPhoneNumber(item.phone)">
							<image mode="widthFix" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon_phone_white.png"/>电话
		                </view>
		            </view>
		        </view>
				
		    </view>
		
		    <view class="connaught-style">
		        <view class="hint">暂无更多数据</view>
		    </view>
		</view>
	</view>
</template>

<script>
	import statisticsApi from '@/api/statistics.js';
	import commonApi from '@/utils/commonMethod.js';
	
	export default {
		data() {
			return {
				chatList: [],//沟通列表
				serviceTelList: [],//沟通列表
				
				currentUser:{},
				startTime:'', //进入页面时间
				endTime:'',//离开页面时间
				currentUrl:'',//当前页面全路径
			}
		},
		onShow(){
				
			setTimeout(()=> {
				
				if (getApp().globalData.onShow) {
					getApp().globalData.onShow = 0;
					console.log("demo前后台切换之切到前台")
				}
				else {
					console.log("demo页面被切换显示")
					this.startTime = +new Date();
				}
				
			}, 100);
		},
		onHide(){
			setTimeout(() => {
				var that = this
				if (getApp().globalData.onHide) {
					getApp().globalData.onHide = 0;
					console.log("还在当前页面活动")
				}
				else {
					that.endTime = +new Date();
					console.log("demo页面停留时间：" + (that.endTime - that.startTime))
					var stayTime = Math.round((that.endTime - that.startTime)/1000);
				   //这里获取到页面停留时间stayTime，然后了可以上报了
				   this.saveFootPrint(stayTime);
				}
			}, 100)
		},
		onUnload(){
				setTimeout(() => {
				var that = this
				if (getApp().globalData.onHide) {
					getApp().globalData.onHide = 0;
					console.log("还在当前页面活动")
				}
				else {
					that.endTime = +new Date();
					console.log("demo页面停留时间：" + (that.endTime - that.startTime))
					var stayTime = Math.round((that.endTime - that.startTime)/1000);
				   //这里获取到页面停留时间stayTime，然后了可以上报了
				   this.saveFootPrint(stayTime);
				}
			}, 100)
		},
		async mounted() {
			//获取当前用户
			const currentPromise = await commonApi.currentUserAxios();
			this.currentUser = currentPromise.data.session_user_h5;
			//获取在线沟通
			let types = [5];
			await commonApi.getBrowseMineByType2(this.currentUser.id,types).then(res =>{
				res.data.countAndList.list.forEach((value, index, array) => {
					value.chatType = 5;
					if (value.type == 1 && value.state == 1) {
						value.role = 1
					} else {
						value.role = 2
					}
				})
				this.chatList = res.data.countAndList.list;
			})
			
			//获取电话沟通
			types = [6];
			await commonApi.getBrowseMineByType2(this.currentUser.id, types).then(res =>{
				res.data.countAndList.list.forEach((value, index, array) => {
					value.chatType = 6;
					if (value.type == 1 && value.state == 1) {
						value.role = 1
					} else {
						value.role = 2
					}
				})
				this.chatList = [...this.chatList, ...res.data.countAndList.list];
			})
			const pages = getCurrentPages()
			const currentPage =pages[pages.length - 1]
			this.currentUrl = currentPage.$page.fullPath
			
			
		},
		methods: {
			saveFootPrint(stayTime){
			    commonApi.saveFootPrint(this.currentUser.id,this.startTime,stayTime,this.currentUrl,"沟通")
			},
			toChat(id) {
				uni.navigateTo({
					url: "/pages/news/chatDetail/chatDetail?toUserId=" + id
				})
			},
		
			noPhone() {
				layer.open({
					anim: '提示',
					content: '该企业没有提供客服电话',
					btn: ['确定'],
					yes: function (index) {
						layer.close(index)
					}
				});
			},
			async dialPhoneNumber(phone){
				commonApi.callUp(phone)
			},

		}
	}
</script>

<style>
	.communicationRecord .attention-data {
	    background-color: #ffffff;
	    padding: 0px 28rpx;
	}
	.communicationRecord .attention-data .attention-item {
	    flex-wrap: nowrap;
	    padding: 18rpx 0px;
	    border-bottom: 1.5rpx solid #ededed;
		display: flex;
	}
	.myAttention .attention-data .attention-item .avatar-info, .communicationRecord .attention-data .attention-item .avatar-info {
	    flex-wrap: nowrap;
	    flex-shrink: 1;
	    width: 100%;
		display: flex;
	}
	.communicationRecord .attention-data .attention-item .avatar-info .avatar {
	    width: 93rpx;
	    flex-shrink: 0;
	    border-radius: 50%;
	}
	.myAttention .attention-data .attention-item .avatar-info .info, .communicationRecord .attention-data .attention-item .avatar-info .info {
	    flex-shrink: 1;
	    width: 100%;
	    margin-left: 18rpx;
	}
	.myAttention .attention-data .attention-item .avatar-info .info .name, .communicationRecord .attention-data .attention-item .avatar-info .info .name {
	    font-size: 15px;
	}
	.communicationRecord .attention-data .attention-item .avatar-info .info .name image {
	    margin-left: 3.5rpx;
	}
	 .communicationRecord .attention-data .attention-item .avatar-info .info .user {
	    color: #8f99a7;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-line-clamp: 1;
	    -webkit-box-orient: vertical;
	    margin-top: 9rpx;
	}
	.communicationRecord .attention-data .attention-item .avatar-info .info .user image {
	    margin-right: 10rpx;
	}
	.communicationRecord .attention-data .attention-item .avatar-info .info image {
	    width: 28rpx;
	    vertical-align: middle;
	    margin-top: -7rpx;
	}
	.communicationRecord .attention-data .attention-item .private-letters {
	    flex-shrink: 0;
	    margin-left: 28rpx;
	}
	.communicationRecord .attention-data .attention-item .private-letters .btn-to-what{
		background-color: #029E9D;
		line-height: 46rpx;
		border-radius: 23rpx;
		color: #ffffff;
		padding: 0px 21rpx;
		font-size: 10px;
	}
	.communicationRecord .attention-data .attention-item .private-letters .btn-to-what {
	    background-color: #029E9D;
	}
	 .communicationRecord .attention-data .attention-item .private-letters .btn-to-what image {
		width: 26rpx;
		vertical-align: middle;
		margin-right: 7rpx;
		margin-top: -3.5rpx;
	 }
	 .communicationRecord .attention-data .attention-item .private-letters .btn-phone image {
		width: 26rpx;
		vertical-align: middle;
		margin-right: 7rpx;
		margin-top: -3.5rpx;
	 }
	 .communicationRecord .attention-data .attention-item .private-letters .btn-phone {
	     background-color: #029E9D;
	     line-height: 46rpx;
	     border-radius: 21rpx;
	     color: #ffffff;
	     padding: 0px 21rpx;
	     font-size: 10px;
	 }
	.communicationRecord .attention-data .attention-item .private-letters .btn-phone {
	     background-color: #008AFF;
	 }
	 .connaught-style .hint {
	     width: 100%;
	     font-size: 11px;
	     font-weight: 500;
	     color: #8f99a7;
	     line-height: 98rpx;
	     text-align: center;
	 }
	 .myAttention .attention-data .attention-item .private-letters .pl_btn image{
	     vertical-align: middle;
	     margin-right: 7rpx;
	     margin-top: - 3.5rpx;
	 }
</style>